<template>
  <div class="mainControl">
    <VonCrumbs title="NG属性"></VonCrumbs>
    <div class="widget">
      <VonInput
        v-model="detail.value"
        width="260px"
        placeholder="搜索NG"
        @change="getWorkStationList"
      ></VonInput>
         <el-button type="primary" size="small" @click="add" class="addButton">
        添加
      </el-button>
    </div>
    <div class="tableContent">
      <VonTable :column="column" :tableData="tableData">
        <template slot="num">
          <el-table-column label="序号" align="center" width="100px">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
        <el-table-column slot="operation" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="edit(scope.row)"
              style="color: #1890ff"
            >
              编辑
            </el-button>
             <el-button type="text" size="small" @click="del(scope.row)" style="color: #1890ff">
                  删除
                </el-button>
          </template>
        </el-table-column>
      </VonTable>
    </div>
    <VonDialog
      :title="type == 1 ? '新增' : '编辑'"
      @cancelResult="cancelResult"
      @commitResult="commitResult"
      :isShow_Popup="isShow_Popup"
    >
      <div class="deviceForm" slot="content">
        <el-form ref="form" :model="form" label-width="48px">
          <el-form-item>
            <VonInput
              label="NG属性"
              width="460px"
              v-model="form.displayText"
            ></VonInput>
          </el-form-item>
        </el-form>
      </div>
    </VonDialog>
  </div>
</template>

<script>
import {
  getNg,
  getNgDetail,
  deleteNgDetail,
  createNgDetail,
  updateNgDetail,
} from "../../api/workStation/mainControl";
import { openLoading, closeLoading } from "../../common/prompt";
import { validateIP } from "../../common/index";
export default {
  name: "NgSetting",
  data() {
    return {
      ngId: "",
      detail: {
        model: "",
        value: "",
      },
      tableData: [],
      column: [
        {
          align: "center",
          label: "NG属性",
          prop: "displayText",
        },
      ],
      isShow_Popup: false,
      form: {
        id: "",
        name: "",
        plcip: "",
      },
      type: 2,
    };
  },
  methods: {
    cancelResult() {
      this.isShow_Popup = false;
    },
    commitResult() {
      /*  let ApiMethod = "";
      if (this.type == 1) {
        ApiMethod = "";
      } else {
        ApiMethod = workStationUpdate;
      }
      if(!validateIP(this.form.plcip)){
        this.$message.error("请正确输入IP");
        return;
      } */

      openLoading();
      let ApiMethod, formData;
      if (!this.form.displayText) {
        this.$message.error("请填写NG属性");
        return;
      }
      if (this.type == 1) {
        ApiMethod = createNgDetail;
        formData = {
          id: this.ngId,
          code: this.form.displayText,
          displayText: this.form.displayText,
          description: this.form.displayText,
          order: 0,
        };
      } else {
        ApiMethod = updateNgDetail;
        formData = {
          dataDictionaryId: this.ngId,
          id: this.form.id,
          displayText: this.form.displayText,
          description: this.form.displayText,
          order: 0,
        };
      }
      ApiMethod(formData).then((res) => {
        if (res.status == 200 || res.status == 204) {
          this.$message.success(this.type == 1 ? "新增成功" : "修改成功");
          this.getWorkStationList();
        } else {
          this.$message.error(this.type == 1 ? "新增失败" : "修改失败");
        }
      });
      this.isShow_Popup = false;
      this.form = {
        id: "",
        name: "",
        plcip: "",
      };
    },
    add() {
      this.form = {};
      this.type = 1;
      this.isShow_Popup = true;
    },
    edit(row) {
      let { id, displayText } = row;
      this.form = {
        id,
        displayText,
      };
      this.type = 2;
      this.isShow_Popup = true;
    },
    del(row) {
      this.$confirm("是否确认操作？").then(() => {
        let data = {
            dataDictionaryId: this.ngId,
            dataDictionayDetailId: row.id
        };
        deleteNgDetail(data).then(res => {
          this.isShow_Popup = false;
          if (res.status == 200 || res.status == 204) {
            this.$message.success("删除成功");
            this.getWorkStationList(); 
          } else {
            this.$message.error("删除失败");
          }
        });
      });
    },
    getWorkStationList() {
      getNg().then((t) => {
        this.ngId = t.data.items[0].id;
        getNgDetail({
          pageIndex: 1,
          pageSize: 100,
          dataDictionaryId: this.ngId,
          filter: this.detail.value,
        }).then((res) => {
          this.tableData = res.data.items;
          closeLoading();
        });
      });
    },
  },
  created() {
    this.getWorkStationList();
  },
};
</script>

<style scoped lang="scss">
@import "../../style/mainControl";
</style>
